<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <HmHeader @increase="increase"></HmHeader>

    <!-- 主体部分 -->
    <HmContent :list="screenList" @isdelete="isdelete" @change="change"></HmContent>

    <!-- 底部部分 -->
    <HmFooter
      :list="list"
      @clean="clean"
      :type="type"
      @filter="filter"
    ></HmFooter>
  </section>
</template>

<script>
import HmHeader from './components/HmHeader.vue'
import HmContent from './components/HmContent.vue'
import HmFooter from './components/HmFooter.vue'

export default {
  // 注册组件
  components: {
    // 头部组件
    HmHeader,
    // 主体组件
    HmContent,
    // 底部组件
    HmFooter
  },
  data () {
    return {
      list: [
        {
          id: 1,
          username: '读万卷书',
          isComplete: false
        },
        {
          id: 2,
          username: '行万里路',
          isComplete: true
        }
      ],
      type: 'whole'
    }
  },
  // 方法集合
  methods: {
    // 添加事件
    increase (value) {
      const arr = { id: +new Date(), username: value, isComplete: false }
      this.list = [arr, ...this.list]
    },
    // 删除功能
    isdelete (id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    // 修改状态
    change (id) {
      const resun = this.list.find(item => item.id === id)
      resun.isComplete = !resun.isComplete
    },
    // 清空完成
    clean () {
      this.list = this.list.filter(item => item.isComplete === false)
    },
    filter (type) {
      this.type = type
    }
  },
  // 计算属性
  computed: {
    screenList () {
      if (this.type === 'active') {
        console.log(1);
        return this.list.filter(item => item.isComplete === false)
      } else if(this.type === 'completed'){
        return this.list.filter(item => item.isComplete === true)
      } else {
        return this.list
      }
    }
  }
}
</script>

<style></style>
